<template>
  <div class="main">
    <canvas ref='c1' height="310" width="310"></canvas>
  </div>
</template>
<script>
export default {
  mounted(){
    var c1 = this.$refs.c1;
    var ctx = c1.getContext('2d');
    this.drawP();
  },
  beforeDestroy(){
    clearInterval(this.interv);
  },
  data(){
    return {
      interv:null,
    }
  },
  methods:{
    drawP(){
      var ctx = this.$refs.c1.getContext('2d');
      var d = 0;
      this.interv = setInterval(()=>{
        d += 0.02;

        ctx.fillStyle = '#07af90';
        ctx.beginPath();
        ctx.arc(...this.initP(150,150,100,d,this.wave1),this.wave2(4,d),0,2*Math.PI);
        ctx.fill();

        ctx.beginPath();
        ctx.fillStyle = '#04447c';
        ctx.arc(...this.initP(150,150,100,d-2,this.wave1),this.wave2(2,d),0,2*Math.PI);
        ctx.fill();

        ctx.beginPath();
        ctx.fillStyle = '#ff9988';
        ctx.arc(...this.initP(150,150,100,d-4,this.wave1),this.wave2(1,d),0,2*Math.PI);
        ctx.fill();

        if(d>Math.PI * 36){
          clearInterval(this.interv);
          ctx.fill();
        }
      },16);
    },
    initP(x,y,r,d,w){
      var dx = x + (r+w(d)) * Math.cos(d);
      var dy = y + (r+w(d)) * Math.sin(d);
      return [dx,dy];
    },
    wave1(d){
      return 30 * Math.sin(5.25 * d);
    },
    wave2(r,d){
      return r/2 *(1 + 1 * Math.sin(6 * d));
    }
  }
}
</script>
<style lang="less" scoped >
  .main {
    margin: 10px auto;
    padding: 5px;
    width: 320px;
    height: 320px;
    border-radius: 180px;
  }
</style>


